import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    ScrollView,
    Switch,
    DeviceEventEmitter,
} from 'react-native';
import StatusBarSelf from '../../../components/StatusBarSelf';
import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import { ToastToUser } from '../../../utils/CustomToast';
import Constant from '../../../utils/Constant'//全局变量

let navigation

export default class SellerSelectPage extends Component {

    constructor(props) {
        super(props);
        let selectedUserId = this.props.route && this.props.route.params && this.props.route.params.selectedUserId ? this.props.route.params.selectedUserId : ''
        let employees = this.props.route && this.props.route.params && this.props.route.params.employees ? this.props.route.params.employees : []
        let isDetection = this.props.route && this.props.route.params && this.props.route.params.isDetection ? this.props.route.params.isDetection : ''
        let title = this.props.route && this.props.route.params && this.props.route.params.title ? this.props.route.params.title : '收购员名称'
        this.state = {
            isDetection,
            dataArray: employees,
            totalArray: employees,
            searchName: '',
            selectedUserId: selectedUserId,
            title,
        }
    }

    componentDidMount() {
        if (this.state.totalArray.length == 0) {
            if (this.state.isDetection) {
                this.getDetecetionUsers()
            } else {
                this.getUsers()
            }
        }
    }

    getUsers() {
        let param = {
            merchantId: Constant.userInfo.merchantId,
            pageSize: 200
        }
        HttpUtils.getRequest(HttpUrls.getUsersByMerchantId, param)
            .then((result) => {
                let dataArray = result.data
                this.setState({
                    dataArray: dataArray,
                    totalArray: dataArray
                })
            })
            .catch((error) => {

            });
    }

    getDetecetionUsers() {
        let param = {
            userId: Constant.userInfo.userId,
            merchantId: Constant.userInfo.merchantId,
            perms: 16777216
        }
        HttpUtils.postRequest(HttpUrls.queryStaffList, param)
            .then((result) => {
                let data = result.data
                let resultList = data.resultList
                this.setState({
                    dataArray: resultList,
                    totalArray: resultList
                })
            })
            .catch((error) => {

            });
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBarSelf />
                <View style={[styles.toplayout, { height: Constant.navigationBarHeight }]}>
                    <TouchableOpacity
                        style={styles.fanhuibox}
                        activeOpacity={0.8}
                        onPress={()=>{
                            navigation.goBack()
                        }}>
                        <Image source={require('source/image/comm/back.png')} style={styles.fanhui} />
                    </TouchableOpacity>

                    <View style={styles.inputBox}>
                        <Image source={require('source/image/comm/icon_sc_search.png')} style={styles.searchIcon} />
                        <TextInput
                            clearButtonMode='while-editing'
                            style={styles.textInput}
                            placeholder={this.state.title}
                            returnKeyType='search'
                            value={this.state.searchName}
                            onEndEditing={() => {
                                this.startSearch()
                            }}
                            onChangeText={this.onChangeTextHandle}
                            onSubmitEditing={() => {
                                this.startSearch()
                            }}
                        />
                    </View>

                </View>

                <View style={{ flex: 1, }}>
                    <FlatList
                        data={this.state.dataArray}
                        // ListHeaderComponent={this.renderHeader.bind(this)}
                        renderItem={this.renderItemView.bind(this)}
                        ListFooterComponent={this.footer.bind(this)}
                        extraData={this.state}
                    />
                </View>

            </View>
        )
    }

    renderItemView({ item, index }) {
        return (
            <TouchableOpacity
                style={styles.itemBox}
                onPress={() => {
                    if (this.props.route.params.selectCompletion) {
                        this.props.route.params.selectCompletion(item)
                    }
                }}
            >
                <Text style={[styles.nameText, { color: this.state.selectedUserId == item.userId ? '#333' : '#999' }]}>{item.fullname}</Text>
            </TouchableOpacity>
        )
    }

    footer() {
        return (
            <View style={{ width: '100%', height: 34 }}></View>
        )
    }

    onChangeTextHandle = (value) => {
        this.setState({
            searchName: value
        })
    }

    startSearch() {

        if (this.state.searchName) {
            let dataArray = this.state.totalArray
            let temp = []
            dataArray.map((item) => {
                if (item.fullname.indexOf(this.state.searchName) >= 0 || item.fullname.indexOf(this.state.searchName) >= 0) {
                    temp.push(item)
                }
            })
            this.setState({
                dataArray: temp,
            })
        } else {
            this.setState({
                dataArray: this.state.totalArray,
            })
        }
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    toplayout: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffffff'
    },
    fanhuibox: {
        position: 'absolute',
        width: 60,
        height: '100%',
        left: 0,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    fanhui: {
        width: 18,
        height: 16,
        marginLeft: 18,
    },
    inputBox: {
        position: 'absolute',
        left: 60,
        right: 20,
        height: 32,
        backgroundColor: '#F9F9F9',
        borderRadius: 4,
        paddingHorizontal: 10,
        flexDirection: 'row',
        alignItems: 'center'
    },
    searchIcon: {
        width: 14,
        height: 14,
    },
    textInput: {
        marginLeft: 10,
        color: '#333333',
        fontSize: 13,
        height: '100%',
        flex: 1,
        padding: 0
    },
    itemBox: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingHorizontal: 15,
        backgroundColor: '#fff',
        borderBlockColor: '#e4e4e4',
        borderBottomWidth: 0.3
    },
    nameText: {
        fontSize: 15,
        color: '#999'
    }


})